<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add">添加用户</button>
<div>
    <table class="table table-condensed">
        <thead>
        <tr>
            <th>用户账号</th>
            <th>用户姓名</th>
            <th>用户密码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in userList">
            <td>{{row.nickName}}</td>
            <td>{{row.userName}}</td>
            <td>{{row.password}}</td>
            <td>
                <button type="button" class="btn btn-primary"
                        data-toggle="modal" data-target="#update"
                        ng-click="transferValue(row,$index)">修改
                </button>
                <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#delete" ng-click="transferValue(row,$index)">
                    删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>


    <!-- 模态框 -->
    <div class="modal fade" id="delete" role="dialog" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times</button>
                    <h4 class="modal-title">删除用户</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    你确定要删除用户<span class="warnMsg">{{user.nickName}}</span>吗，删除之后不可恢复？
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button ng-click="deleteUser()" type="button"
                            class="btn  btn-danger" data-dismiss="modal">确定
                    </button>
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal" ng-click="initUser()">取消
                    </button>
                </div>

            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="update" role="dialog" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times</button>
                    <h4 class="modal-title">修改用户</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="user.nickName" class="col-sm-3 control-label">登录名</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="user.nickName" type="text" ng-model="user.nickName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user.userName" class="col-sm-3 control-label">用户名</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="user.userName" type="text" ng-model="user.userName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user.password" class="col-sm-3 control-label">密码</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="user.password" type="password" ng-model="user.password">
                            </div>
                        </div>

                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button ng-click="updateUser()" type="button"
                            class="btn  btn-primary" data-dismiss="modal">确定
                    </button>
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal" ng-click="initUser()">取消
                    </button>
                </div>

            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="add" role="dialog" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times</button>
                    <h4 class="modal-title" id="modalLabel">添加用户</h4>
                </div>


                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="nickName" class="col-sm-3 control-label">登录名</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="nickName" type="text" ng-model="user1.nickName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="userName" class="col-sm-3 control-label">用户名</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="userName" type="text" ng-model="user1.userName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-3 control-label">密码</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="password" type="password" ng-model="user1.password">
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer form-group">
                    <button ng-click="addUser()" type="button"
                            class="btn btn-primary" data-dismiss="modal">确定
                    </button>
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal" ng-click="initUser()">取消
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>
<style>
    .warnMsg {
        border: 3px;
        font-size: 15px;
        color: red;
        border: 15px
    }
</style>
